<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录</title>

		<link rel="stylesheet" type="text/css" href="/resources/common/css/bootstrap4/bootstrap.min.css">
    	<link href="/resources/common/css/global.css" rel="stylesheet">
	</head>

		
<body>

	<div class="fixedNavbar">
		<#include "navbar.html">
	</div>
    
    <div class="container">
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-5 col-md-offset-4 col-sm-8 col-sm-offset-2">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">登录</div>
                    <div style="float:right; font-size: 80%; position: relative; top:-18px"><a href="#">忘记密码?</a>
                    </div>
                </div>

                <div style="padding-top:30px" class="panel-body">
                    <form id="loginForm" class="form-horizontal" role="form">
                        <div style="margin-bottom:5px" class="input-group">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-home"></i>
                            </span>
                            <input id="username" type="text" class="form-control" name="username" value="" placeholder="手机/邮箱">
                        </div>
                        <span class="help-block" style="height:16px;margin-bottom:15px;color:red;"></span>
                        <div style="margin-bottom:5px" class="input-group">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-lock"></i>
                            </span>
                            <input id="password" type="password" class="form-control" name="password" placeholder="密码">
                        </div>
                        <span class="help-block" style="height:16px;margin-bottom:15px;color:red;"></span>
                        <div style="margin-top:10px" class="form-group">
                            <div class="col-sm-12 controls">
                                <button id="btn-login" type="submit" class="btn btn-success">  马上登录  </button>
                                <span id="hint" class="btn" style="color:red;display:none;">
                               	 	用户名或密码错误
                            	</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

	<div class="fixedNavbar">
		<#include "footer.html">
	</div>

	<script src="/resources/common/js/jquery-3.3.1.min.js" ></script>
	<script src="/resources/common/js/popper.min.js" ></script>
	<script src="/resources/common/js/util.js" ></script>
	<script src="/resources/common/js/sha1.js" ></script>
	<script src="/resources/common/js/jquery.validate.js" ></script>
	<script src="/resources/common/js/bootstrap4/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(function() {
			$("#loginForm").validate({
				rules: {
					username: {
						required: true
					},
					password: {
						required: true
					},
				},
				messages: {
					username: {
						required: "用户名不能为空"
					},
					password: {
						required: "密码不能为空"
					},
				},
				submitHandler : function() {
 					debugger;
					var username = $("#username").val();
					var password = $("#password").val();

					var handle_login_url = '/user/login/'+username;
					var params = {
						password: hex_sha1(password)
					};

					$.post(handle_login_url, params, function (data, now) {
					       $("#hint").text('').show();
					       if (data.code == 200) {
					            $("#hint").text(data.message).show();
					            location.href="/index";
					       } else {
					            $("#hint").text(data.message).show();
					       }
					});

				}
			});
		});
	</script>
	</body>
</html>
